<template>
	<view class="date">
		<view class="riqi" v-for="item in riqi" :key="item">
			<text class="week">{{item.mon}}</text>
			<view class="day" :class="{active:item.show}" @click="amendDay(item)">{{item.day}}</view>
		</view>
		
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
	
	} from 'vue'
	export default {
		setup(props,context) {
			const countDate=(num)=>{
				const date=new Date()
				let ri=date.getDate()
				let nian=date.getFullYear()
				let zhou=date.getDay()
				let yue=date.getMonth()
				let last=new Date(nian,yue+1,0)
				let lastri=last.getDate()
				let day;
				if(ri+num>lastri){
					day=ri+num-lastri
					yue=yue+1
				}else{
					day=ri+num
				}
				if(zhou+num>=7){
					zhou=zhou+num-7
				}else{
					zhou=zhou+num
				}
				let mon;
				switch (zhou){
					case 0:mon='周日' ;break;
					case 1:mon='周一' ;break;
					case 2:mon='周二' ;break;
					case 3:mon='周三' ;break;
					case 4:mon='周四'; break;
					case 5:mon='周五' ;break;
					case 6:mon='周六' ;break;
					
				}
				
				return {mon,day,nian,yue}
			}
			
			const data=reactive({
				riqi:[
					{						
						...countDate(0),
						show:true,
						mon:'今日',
					},
					{
						show:false,
						...countDate(1),
					},
					{
						...countDate(2),
						show:false
					},
					{
						...countDate(3),
						show:false
					},
					{
						...countDate(4),
						show:false
					},
					{
						...countDate(5),
						show:false
					},
					{
						...countDate(6),
						show:false
					}
				
				]
			})
			
		   console.log(countDate(2).day);
			   const amendDay=(obj)=>{
				   data.riqi.forEach(item=>{
					   if(item.mon==obj.mon){
						   item.show=true
					   }else{
						   item.show=false
					   }
				   })
				   let nyr=obj.nian+'-'+(obj.yue+1)+'-'+obj.day
				   context.emit('hqriqi',nyr)
			   }
		   return {
			   ...toRefs(data),amendDay
		   }
		}
	}
</script>

<style lang="scss">
.date{
	box-sizing: border-box;
	height: 180rpx;
	padding: 24rpx;
	border-radius: 20rpx;
	display: flex;
	justify-content: space-between;
	border: 1px solid #eee;
	align-items: center;
	.riqi {
		height: 100%;
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: space-between;
		.week{
			font-size: 28rpx;
			color: #999;
		}
		.day {
			width: 80rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 30rpx;
			color: #fff;
			text-align: center;
			background-color: #eee;
		}
		.active{
			background-color: #0066ff;
			box-shadow: 0 16rpx 12rpx 12rpx rgba(102, 153, 255, .1);
		}
		.hovers{
			background-color: #0066ff;
		}
	}
	
}
</style>
